<template>
  <div class="personal-center">
    <!-- PC端 -->
    <el-container v-if="!isMobile" class="individual-container">
      <el-aside class="Menus" style="overflow:none;width:200px;height:50vh;">
        <!-- 导航栏 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-user"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-wallet"></i>
            <span slot="title">充值中心</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-lock"></i>
            <span slot="title">账户安全</span>
          </el-menu-item>
          <el-menu-item
            index="4"
            v-show="openingModuleList.find(item => item == 'article')"
          >
            <i class="el-icon-video-camera"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item
            index="5"
            v-show="openingModuleList.find(item => item == 'musicScore')"
          >
            <i class="el-icon-reading"></i>
            <span slot="title">乐谱管理</span>
          </el-menu-item>
          <el-menu-item
            index="6"
            v-show="openingModuleList.find(item => item == 'video')"
          >
            <i class="el-icon-notebook-2"></i>
            <span slot="title">视频管理</span>
          </el-menu-item>
          <el-menu-item
            index="7"
            v-show="openingModuleList.find(item => item == 'document')"
          >
            <i class="el-icon-document"></i>
            <span slot="title">文档管理</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-chat-dot-round"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">回复评论管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="padding:0px;" class="Mains">
        <router-view style="margin-left:50px;"></router-view>
      </el-main>
    </el-container>
    <el-container v-else>
      <el-main>
        <!-- 导航栏 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-user"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-wallet"></i>
            <span slot="title">充值中心</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-lock"></i>
            <span slot="title">账户安全</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-video-camera"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-reading"></i>
            <span slot="title">乐谱管理</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">视频管理</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-document"></i>
            <span slot="title">文档管理</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-chat-dot-round"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">回复评论管理</span>
          </el-menu-item>
        </el-menu>
        <router-view class="mobile-footer"></router-view>
      </el-main>
    </el-container>
    <!-- 移动端 -->
  </div>
</template>

<script>
import {
  removeActiveResourceIndex,
  getActiveResourceIndex,
  setActiveResourceIndex
} from '../../../utils/Storage'
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  components: {},
  methods: {
    // 选中菜单
    handleSelect(index) {
      this.activeIndex = index
      // 存储临时索引
      setActiveResourceIndex(index)

      switch (index) {
        case '1':
          this.$router.push('/individual/center')
          break
        case '2':
          this.$router.push('/individual/rechargeCenter')
          break
        case '3':
          this.$router.push('/individual/security')
          break
        case '4':
          this.$router.push('/individual/articlemanage')
          break
        case '5':
          this.$router.push('/individual/musicscoremanage')
          break
        case '6':
          this.$router.push('/individual/videomanage')
          break
        case '7':
          this.$router.push('/individual/docmanage')
          break
        case '8':
          this.$router.push('/individual/commentmanage')
          break
        case '9':
          this.$router.push('/individual/replyCommentmanage')
          break
      }
    }
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    },
    openingModuleList() {
      return this.$store.state.paid.openingModuleList
        ? this.$store.state.paid.openingModuleList
        : []
    }
  },
  mounted() {
    // 获取索引
    this.activeIndex = getActiveResourceIndex()

    this.handleSelect(this.activeIndex)
  },
  beforeDestroy() {
    // 删除存储的索引
    // removeActiveIndex()
  }
}
</script>

<style>
.individual-container {
  margin-top: 20px;
}
.personal-center {
  margin-top: 20px;
}
.el-aside {
  overflow: none;
}
.Menus {
  min-height: 90vh;
}
.Menus >>> .el-aside {
  overflow: none;
}
.el-menu-item:hover {
  background-color: #0064fa; /* Set the desired background color for the hover state */
  color: white; /* Set the desired text color for the hover state */
}
.Menus .is-active {
  background-color: #0064fa;
  color: #fff;
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
  #Content {
    /* position: absolute; */

    width: 90%;
    margin: 0px auto 0px auto;
    min-height: 90vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 auto;
  }
  .el-main {
    padding: 20px;
  }
  .mobile-footer {
    margin-top: 0.2rem;
  }
  /* 其他移动端样式设置 */
}
</style>
